<div class="easyui-tabs config-tabs" data-options="fit:true">
    <div title="基础配置" class="con"  style="-moz-user-select:none;">
        <div class="config-panel">
            <div class="config-box a-bg">
                <div class="title">基本信息</div>
                <div class="caption">配置商城基本信息</div>
                <div class="description">
                    <div>商城名称、H5域名、Logo信息</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small" onclick="configEdit(1, '基本信息')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box b-bg">
                <div class="title">会员配置</div>
                <div class="caption">配置会员默认信息</div>
                <div class="description">
                    <div>昵称、头像、分组、余额、积分</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(7, '会员配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box c-bg">
                <div class="title">分享配置</div>
                <div class="caption">配置默认分享信息</div>
                <div class="description">
                    <div>分享标题,图片,海报背景</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(8, '分享配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box g-bg">
                <div class="title">积分配置</div>
                <div class="caption">配置默认积分规则</div>
                <div class="description">
                    <div>签到积分、连续签到规则</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(18, '积分配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box d-bg">
                <div class="title">提现转账</div>
                <div class="caption">配置默认提现转账规则</div>
                <div class="description">
                    <div>手续费、最小最大金额</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(9, '提现配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box e-bg">
                <div class="title">客服配置</div>
                <div class="caption">配置客服信息</div>
                <div class="description">
                    <div>配置客服信息，快速沟通</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(10, '客服配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box f-bg">
                <div class="title">商城配置</div>
                <div class="caption">配置默认商城规则</div>
                <div class="description">
                    <div>库存预警，订单自动关闭</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(11, '商城配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box h-bg" style="display: none;">
                <div class="title">分佣配置</div>
                <div class="caption">配置默认分佣规则</div>
                <div class="description">
                    <div>代理，股东,区代,推客分红</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(19, '分佣配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div title="平台配置" class="con"  style="-moz-user-select:none;">
        <div class="config-panel">
            <div class="config-box c-bg">
                <div class="title">微信公众号</div>
                <div class="caption">配置微信公众号</div>
                <div class="description">
                    <div>AppId、AppSecret、自动登录</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(12, '微信公众号配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box d-bg">
                <div class="title">小程序</div>
                <div class="caption">配置小程序</div>
                <div class="description">
                    <div>AppId、AppSecret、自动登录</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(13, '小程序配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box e-bg">
                <div class="title">H5</div>
                <div class="caption">配置H5平台</div>
                <div class="description">
                    <div>微信H5自动登录</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(14, 'H5配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box f-bg">
                <div class="title">APP</div>
                <div class="caption">配置App平台</div>
                <div class="description">
                    <div>生成App实现多端同步使用</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(15, 'APP配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div title="支付配置" class="con"  style="-moz-user-select:none;">
        <div class="config-panel">
            <div class="config-box d-bg">
                <div class="title">微信支付</div>
                <div class="caption">配置微信支付</div>
                <div class="description">
                    <div>微信支付配置参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(3, '微信支付配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box e-bg">
                <div class="title">支付宝支付</div>
                <div class="caption">配置支付宝支付</div>
                <div class="description">
                    <div>支付宝支付配置参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(2, '支付宝配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box f-bg">
                <div class="title">余额支付</div>
                <div class="caption">配置余额支付</div>
                <div class="description">
                    <div>余额支付配置参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(16, '余额配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box b-bg">
                <div class="title">汇聚支付</div>
                <div class="caption">配置余额支付</div>
                <div class="description">
                    <div>汇聚支付配置参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(30, '汇聚支付配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box c-bg">
                <div class="title">合利宝支付</div>
                <div class="caption">配置合利宝支付</div>
                <div class="description">
                    <div>合利宝支付配置参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(31, '合利宝支付配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div title="第三方服务" class="con"  style="-moz-user-select:none;">
        <div class="config-panel">
            <div class="config-box b-bg">
                <div class="title">CDN配置</div>
                <div class="caption">七牛CDN</div>
                <div class="description">
                    <div>配置七牛CDN信息</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(4, 'CDN配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box c-bg">
                <div class="title">短信配置</div>
                <div class="caption">阿里云短信</div>
                <div class="description">
                    <div>配置阿里云短信参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(5, '短信配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box d-bg">
                <div class="title">地图设置</div>
                <div class="caption">百度地图</div>
                <div class="description">
                    <div>配置百度地图参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(6, '地图配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="config-box e-bg">
                <div class="title">快递配置</div>
                <div class="caption">快递鸟</div>
                <div class="description">
                    <div>配置快递鸟参数</div>
                    <div>
                        <a href="javascript:;" style="border-radius: 20px;padding: 0 10px;" class="l-btn l-btn-small"  onclick="configEdit(17, '快递配置')">
                            <span class="l-btn-text">立即设置</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="configDlg" class="easyui-dialog" style="width:720px; height:460px;" title="信息框" closed="true"></div>

<script>
    var configEdit = function (type, title='编辑信息') {
        $("#configDlg").dialog({
            title: title,
            closed: false,
            width: 720,
            height: 450,
            cache: false,
            href: '/admin/config/view?type=' + type,
            modal: true,
            buttons: [{
                text: '保存',
                id: 'configsubmit',
                iconCls: 'icon-ok',
            }, {
                text: '关闭',
                iconCls: 'icon-no',
                handler: function () {
                    $("#configDlg").dialog('close');
                }
            }]
        });
    };
</script>

<style>
    .config-panel{
        display: flex; flex-wrap: wrap
    }
    .config-box{
        width: 20%;
        height: 150px;
        padding:20px 20px 20px 20px;
        margin: 10px 20px;
        color:#fff;
        border-radius: 20px;
    }
    .a-bg{
        background: linear-gradient(rgb(186, 240, 221) 0%, rgb(81, 188, 153) 100%);
    }
    .b-bg{
        background: linear-gradient(rgb(252, 230, 183) 0%, rgb(233, 168, 72) 100%);
    }
    .c-bg{
        background: linear-gradient(rgb(213, 184, 250) 0%, rgb(143, 98, 201) 100%);
    }
    .d-bg{
        background: linear-gradient(rgb(250, 221, 192) 0%, rgb(228, 127, 109) 100%);
    }
    .e-bg{
        background: linear-gradient(rgb(175, 203, 253) 0%, rgb(90, 124, 207) 100%);
    }
    .f-bg{
        background: linear-gradient(rgb(161, 243, 222) 0%, rgb(61, 160, 167) 100%);
    }
    .g-bg{
        background: linear-gradient(rgb(252, 183, 190) 0%, rgb(211, 96, 104) 100%);
    }
    .h-bg{
        background: linear-gradient(rgb(152, 230, 190) 0%, rgb(133, 168, 74) 100%);
    }
    .config-box .title{
        font-size: 24px;
        line-height: 60px;
    }
    .config-box .caption{
        font-size: 14px;
        line-height: 50px;
    }
    .config-box .description{
        font-size: 14px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
    }
</style>